/**
 * Created by xxx on 2017年12月4日.
 */
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//当前第几页、总页数、总行数
var otherData = {pageLeft:0,pageRight:0};
//分页
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="studentsInfo-page tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                        {
                            items.map(function (item) {
                                return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                            })
                        }
                        <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                    </ol>
                </div>
            </div>
        );
    },
});

//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            tableData:[],
            menuType: 1,//1:地区发券 2：单个发券3：发券记录
            navigation: '',//导航内容
            addressData: [],
            msgReceivObject: '2',//1:全部用户 2:指定手机号
            userType: 1,//0：所有，2:家长 1:老师
            trData: [],
        }
    },
    componentDidMount: function () {
        suixun.hideLoding(500);//显示加载中
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }
        this.pageSendGoodsRecord(currentpage);
    },
    /**
     * 获取发券列表
     * @param page
     */
    pageSendGoodsRecord: function(page){
        var params = 'page='+page+'&size='+pagecount;
        suixun.showLoding();//显示加载中
        suixun.ajax( serverUrl+'/credits/sendGoods/pageSendGoodsRecord.json?'+params,'',"get",function(data){
            suixun.hideLoding();
            if(data.code == 200){
                if(data.info.list==null){
                    currentpage = 1;
                    otherData.pageLeft = 0;
                    otherData.pageRight = 0;
                    totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                }else{
                    var pageInfo = suixun.getPageInfoTwo(page, data.info.pages);
                    currentpage = pageInfo.currentpage;
                    otherData.pageLeft = pageInfo.pageLeft;
                    otherData.pageRight = pageInfo.pageRight;
                    totlepage = pageInfo.totlepage;//初始化的时候赋值：分页的当前页和总的页数}
                }
                console.log(data.info.list);
                this.setState({tableData:data.info.list==null?[]:data.info.list,otherData:otherData});
            }else{
                suixun.alert(data.msg,function (data) {
                    if(data){
                        currentpage = 1;
                        otherData.pageLeft = 0;
                        otherData.pageRight = 0;
                        totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:[],otherData:otherData});

                    }
                }.bind(this))
            }
        }.bind(this));
    },
    /**
     * 切换菜单点击按钮
     * @return {XML}
     */
    changeMenu: function (type) {
        if(type==3){
            this.pageSendGoodsRecord(1);
        }
        this.setNavigation('');
        this.setState({menuType:type});
    },
    /**
     * 新增地址
     */
    addAdress: function () {
        var province = $('.span-provinceid').text();//省
        var city = $('.span-cityid').text();//市
        var county = $('.span-countyid').text();//区
        var id = 0,addressData = this.state.addressData;
        if(province=="选择省份"){
            suixun.alert('请选择省份');
            return;
        }
        province = province=="选择省份"?null:province;
        city = city=="选择地区"?null:city;
        county = county=="选择县或街道"?null:county;
        if(addressData.length>0){
            id = addressData[addressData.length-1].id+1;
        }
        var isRepeat = false;
        for(var j = 0;j < addressData.length;j++){
            if(addressData[j].province == province){
                if(addressData[j].city == city && city != ''){
                    if(addressData[j].town == county && county != ''){
                        isRepeat = true;
                        break;
                    }else if((county == '' && addressData[j].town == '') || (county != '' && addressData[j].town == '') || (county == '' && addressData[j].town != '')){
                        isRepeat = true;
                        break;
                    }
                }else if((city == '' && addressData[j].city=='') || (city != '' && addressData[j].city == '') || (city == '' && addressData[j].city != '')){
                    isRepeat = true;
                    break;
                }
            }
        }
        if(isRepeat){
            suixun.alert('已有该地区！');
            return;
        }
        addressData.push({
            "id":id,
            "province":province,
            "city":city,
            "town":county,
        });
        this.setState({addressData:addressData});
    },
    /**
     * 清除指定地址
     */
    closeAddres: function (index) {
        if(this.state.addressData.length==1){
            this.state.addressData = [];
        }else{
            this.state.addressData.splice(index,1);
        }
        this.setState({addressData:this.state.addressData});
    },
    /**
     * 改变接收对象
     */
    changeMsgReceivObject: function () {
        this.setState({msgReceivObject: $(".message-object option:selected").val(),schoolList: [],schoolShow: false,addressData: []});
    },
    /**
     * 单个发券-设置消息类型
     * @param userType
     */
    setUserType: function (userType) {
        this.setState({userType:userType})
    },
    /**
     * 地区发券
     */
    sendByRegion: function () {
        var range = $("#sendByRegion_range option:selected").val();//发送对象
        var content = $("#sendByRegion_content").val();//消息内容
        var goodsNumber = $("#sendByRegion_goodsNumber").val();//商品号
        goodsNumber = suixun.TransferString(goodsNumber.replace(/ /g,'').replace(/	/,''));
        //验证消息接收对象
        if(content == ''){
            suixun.alert("消息内容不能为空!");
            return;
        }
        if(this.state.addressData.length==0){
            suixun.alert("请添加发送地区!");
            return;
        }
        //验证title
        if(goodsNumber.length == 0){
            suixun.alert("商品号不能为空!");
            return;
        }else if(goodsNumber.replace(/，/g,',').split(',').length>5){
            suixun.alert("最多添加五个商品!");
            return;
        }
        if(suixun.isRepeatArray(goodsNumber.split(','))){
            suixun.alert('请勿输入重复券！');
            return;
        }
        var param = {
            range: range,
            regions: this.state.addressData,
            content: content,
            goodsNumber: goodsNumber.replace(/，/g,',').split(','),
        };
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/sendGoods/sendByRegion.json',JSON.stringify(param),"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        $("#sendByRegion_range option:selected").val('0');//消息接收对象
                        $("#sendByRegion_goodsNumber").val("");//内容
                        $("#sendByRegion_content").val("");//内容
                        $('.span-provinceid').text('选择省份');//省
                        $('.span-cityid').text('选择地区');//市
                        $('.span-countyid').text('选择县或街道');//区
                        this.setState({addressData:[]});
                    }
                }.bind(this));
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this),"application/json; charset=utf-8");
    },
    /**
     * 单个发券
     */
    sendByPeople: function () {
        var peopletels = $("#sendByPeople_peopletels").val();//消息内容
        var content = $("#sendByPeople_content").val();//消息内容
        var goodsNumber = $("#sendByPeople_goodsNumber").val();//商品号
        goodsNumber = suixun.TransferString(goodsNumber.replace(/ /g,'').replace(/	/,''));
        if(this.state.msgReceivObject==2){
            if(peopletels==''){
                suixun.alert("请输入用户手机号!");
                return;
            }
        }
        //验证消息接收对象
        if(content == ''){
            suixun.alert("消息内容不能为空!");
            return;
        }
        //验证title
        if(goodsNumber.length == 0){
            suixun.alert("商品号不能为空!");
            return;
        }else if(goodsNumber.replace(/，/g,',').split(',').length>10){
            suixun.alert("最多添加十个商品!");
            return;
        }
        if(suixun.isRepeatArray(goodsNumber.split(','))){
            suixun.alert('请勿输入重复券！');
            return;
        }
        var param = {
            range: this.state.userType,
            content: content,
            goodsNumber: goodsNumber.replace(/，/g,',').replace(/ /g,'').split(','),//替换分号，替换掉空格
        };
        if(this.state.msgReceivObject==2){
            param['peopletels'] = peopletels.split(',');
        }
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/credits/sendGoods/sendByPeople.json',JSON.stringify(param),"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert('操作成功!',function (data) {
                    if(data){
                        $("#sendByPeople_peopletels").val("");//内容
                        $("#sendByPeople_content").val("");//内容
                        $("#sendByPeople_goodsNumber").val("");//内容
                        this.setState({userType:'1'});
                    }
                }.bind(this));
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this),"application/json; charset=utf-8");
    },
    /**
     * 设置导航名称
     * @return {XML}
     */
    setNavigation: function (name) {
        this.setState({navigation:name})
    },
    /**
     * 查询
     * @param data 选中行数据
     */
    onSelect: function (data) {
        var trData = data;
        this.setNavigation('详情');

        if(data.sendArea!=null) {
            trData.sendArea = JSON.parse(data.sendArea);
        }
        if(data.peopletels!=null){
            trData.peopletels = data.peopletels.replace('["','').replace('"]','').replace(/"/g,'');
        }
        if(data.goodsNumbers!=null){
            trData.goodsNumbers = data.goodsNumbers.replace('["','').replace('"]','').replace(/"/g,'');
        }
        this.setState({trData:trData});
    },
    render: function () {
        var trData = this.state.trData;
        var Tabels = this.state.tableData.map(function (data,index) {
            return (
                <tr>
                    <td style={{width: '10%'}}>{parseInt(index)+1}</td>
                    <td style={{width: '40%'}}>{data.content}</td>
                    <td style={{width: '30%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(data.createTime))}</td>
                    <td style={{width: '20%'}}>
                        <div className='trButton trLeft table-select' onClick={this.onSelect.bind(this,data)}>详情</div>
                    </td>
                </tr>
            )
        }.bind(this));
        return (
            <div className="tableManage-body wholesaleTicket">
                <header style={this.state.navigation==''?{}:{paddingBottom:'70px'}}>
                    <div className="header-left">
                        <div className="header-left-studentInfo" >
                            <span className={this.state.menuType==1?"header-left-button showOrder":"header-left-button "} onClick={this.changeMenu.bind(this,1)}>地区发券</span>
                            <span className={this.state.menuType==2?"header-left-button showOrder":"header-left-button "} onClick={this.changeMenu.bind(this,2)}>单个发券</span>
                            <span className={this.state.menuType==3?"header-left-button showOrder":"header-left-button "} onClick={this.changeMenu.bind(this,3)}>发券记录</span>
                        </div>
                        <div className="header-left" style={this.state.navigation==''?{display:'none'}:{display:'block',width:'100%',top:'0'}}>
                            <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>发券记录</div>
                            <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' >
                                <a href="javascript:void(0);" onClick={this.setNavigation.bind(this,'')}>发券记录</a><span>>{this.state.navigation}</span>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="tableInfo" style={this.state.menuType==3?this.state.navigation!=''?{display:'none'}:{display:'block'}:{display:'none'}}>
                    <div className="tableInfo-data">
                        <div className="tableInfo-data-table" >
                            <table className="head-body">
                                <thead>
                                    <th style={{width: '10%'}}>序号</th>
                                    <th style={{width: '40%'}}>标题</th>
                                    <th style={{width: '30%'}}>发送时间</th>
                                    <th style={{width: '20%'}}>操作</th>
                                </thead>
                                <tbody>
                                {this.state.tableData==""?'':Tabels}
                                </tbody>
                            </table>
                            {this.state.tableData==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                        </div>
                    </div>
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                </div>
                {
                    this.state.menuType==1?
                        <div className="body-updateAttendance" >
                            <div className="body-content" >
                                <div className="body-content-title">发送对象：</div>
                                <div className="body-content-text">
                                    <div className="content-select-border">
                                        <select className="export-factory msgType " id="sendByRegion_range">
                                            {/*<option value="0" selected='selected'>所有</option>*/}
                                            <option value="1" selected='selected'>教师</option>
                                            <option value="2" >家长</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <Address addAdress={this.addAdress} />
                            <div className="body-content">
                                {/*style={{width:'135px',backgroundPosition:'108px 4px'}}*/}
                                <div className="body-content-title" >已选地区：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder" style={{height:'auto',width:'900px'}}>
                                        {
                                            this.state.addressData.length>0?
                                                this.state.addressData.map(function (data,index) {
                                                    return (
                                                        <div className="text-block">
                                                            <span className="content">{data.province}&nbsp;{data.city}&nbsp;{data.town}</span>
                                                            <span className="colose-img" onClick={this.closeAddres.bind(this,index)}/>
                                                        </div>
                                                    )
                                                }.bind(this)):<span style={{color:'#999999'}}>请选择地区！</span>
                                        }

                                    </div>
                                </div>
                            </div>
                            <div className="body-content">
                                <div className="body-content-title">消息内容：</div>
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content" id="sendByRegion_content" placeholder="消息内容限制为30个字" maxLength="60"/>
                                    </div>
                                </div>
                            </div>
                            <div className="body-content">
                                <div className="body-content-title">商&nbsp;&nbsp;品&nbsp;&nbsp;号：</div>
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content " id="sendByRegion_goodsNumber" placeholder="最多添加五个商品" maxLength="500"/>
                                    </div>
                                </div>
                            </div>
                            <div className="body-content">
                                <span className="body-svae" onClick={this.sendByRegion.bind(this)}>立即发送</span>
                            </div>
                        </div>:''
                }
                {
                    this.state.menuType==2?
                        <div className="body-updateAttendance" >
                            {
                                /**
                                 * 下拉框
                                 */
                            }
                            <div className="body-content">
                                <div className="body-content-title">消息类型：</div>
                                <div className="body-content-text">
                                    {/*<div className={this.state.userType==0?'menu-radio-list select':'menu-radio-list'} onClick={this.setUserType.bind(this,0)}><span>所有端优惠劵</span></div>*/}
                                    <div className={this.state.userType==1?'menu-radio-list select':'menu-radio-list'} onClick={this.setUserType.bind(this,1)}><span>教师端优惠劵</span></div>
                                    <div className={this.state.userType==2?'menu-radio-list select':'menu-radio-list'} onClick={this.setUserType.bind(this,2)}><span>家长端优惠劵</span></div>
                                </div>
                            </div>
                            <div className="body-content" >
                                <div className="body-content-title">接收对象：</div>
                                <div className="body-content-text">
                                    <div className="content-select-border ">
                                        <select className="export-factory msgType message-object" selected={this.state.msgReceivObject} onChange={this.changeMsgReceivObject.bind(this)}>
                                            {/*<option value="1" >全部用户</option>*/}
                                            <option value="2" >部分用户</option>
                                        </select>
                                    </div>
                                    {/*<div className="content-border content-textarea" style={{margin:'35px 0px 12px -192px'}}>*/}
                                    {/*<textarea type="text" className="textarea-content" placeholder="请填写考勤机投放学校" maxLength="500"/>*/}
                                    {/*</div>*/}
                                </div>
                            </div>
                            {
                                /**
                                 * 单个用户
                                 */
                            }
                            <div className="body-content" style={this.state.msgReceivObject==2?{display:'block'}:{display:'none'}}>
                                <div className="body-content-title noImg"/>
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content phones" id="sendByPeople_peopletels" placeholder='请输入手机号，手机号之间用"，"隔开' maxLength="1000"/>
                                    </div>
                                </div>
                            </div>
                            {
                                /**
                                 * 多行文本框
                                 */
                            }
                            <div className="body-content">
                                <div className="body-content-title">消息内容：</div>
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content" id="sendByPeople_content" placeholder="消息内容限制为30个字" maxLength="500"/>
                                    </div>
                                </div>
                            </div>
                            {
                                /**
                                 * 多行文本框
                                 */
                            }
                            <div className="body-content">
                                <div className="body-content-title">商&nbsp;&nbsp;品&nbsp;&nbsp;号：</div>
                                <div className="body-content-text">
                                    <div className="content-border content-textarea">
                                        <textarea type="text" className="textarea-content" id="sendByPeople_goodsNumber"  placeholder="最多输入10个商品号" maxLength="500"/>
                                    </div>
                                </div>
                            </div>
                            <div className="body-content">
                                <span className="body-svae" onClick={this.sendByPeople.bind(this)}>发送</span>
                            </div>
                        </div>:''
                }
                {
                    this.state.menuType==3?this.state.navigation==''?'':
                        <div className="body-updateAttendance" >
                            <div className="body-content">
                                <div className="body-content-title" style={{width: '100px',backgroundPosition: '80px 4px'}}>发送客户端：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder textInput" >{trData.sendRange}</div>
                                </div>
                            </div>
                            {
                                trData.sendArea==null?'':
                                    <div className="body-content">
                                        <div className="body-content-title" >已选地区：</div>
                                        <div className="body-content-text">
                                            <div className="content-border element-content noBorder" style={{height:'auto',width:'900px'}}>
                                                {
                                                    trData.sendArea.length>0?
                                                        trData.sendArea.map(function (data,index) {
                                                            return (
                                                                <div className="text-block">
                                                                    <span className="content">{data.province}&nbsp;{data.city}&nbsp;{data.town}</span>
                                                                </div>
                                                            )
                                                        }.bind(this)):''
                                                }

                                            </div>
                                        </div>
                                    </div>

                            }
                            {
                                trData.peopletels==null?'':
                                    <div className="body-content">
                                        <div className="body-content-title noImg">已选用户：</div>
                                        <div className="body-content-text">
                                            <div className="content-border element-content noBorder " style={{height:'auto',minHeight:'30px',wordWrap: 'break-word'}} >{trData.peopletels}</div>
                                        </div>
                                    </div>
                            }

                            <div className="body-content">
                                <div className="body-content-title">发送时间：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder textInput" >{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(trData.createTime))}</div>
                                </div>
                            </div>
                            <div className="body-content">
                                <div className="body-content-title">操&nbsp;&nbsp;作&nbsp;&nbsp;者：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder textInput" >{trData.userName}</div>
                                </div>
                            </div>
                            <div className="body-content">
                                <div className="body-content-title noImg">消息内容：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder " style={{height:'auto',minHeight:'30px',wordWrap: 'break-word'}} >{trData.content}</div>
                                </div>
                            </div>
                            <div className="body-content">
                                <div className="body-content-title noImg">商&nbsp;&nbsp;品&nbsp;&nbsp;号：</div>
                                <div className="body-content-text">
                                    <div className="content-border element-content noBorder " style={{height:'auto',minHeight:'30px',wordWrap: 'break-word'}} >{trData.goodsNumbers}</div>
                                </div>
                            </div>
                        </div>
                        :''
                }
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});

/**
 * 获取行政区域组件开始
 * @type {*}
 */
var Address=React.createClass({
    getInitialState:function () {
        return{
            provinceData:[],
            cityData:[],
            countyData:[]
        };
    },
    queryAddress:function (num,province,city) {
        var param="param={";
        param = getJsonDataNotEmpty(param,"type",'"'+num+'"');
        param = getJsonDataNotEmpty(param,"province",'"'+province+'"');
        param = getJsonDataNotEmpty(param,"city",'"'+city+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/schoolManage/queryRegion.json',param,"get",function(data){
            if(data.code == 200){
                if(num == "1"){
                    var provinceData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        provinceData[i] = {value:data.info[i].province};
                    }
                    svar.setState({provinceData:provinceData});
                }else if(num == "2"){
                    var cityData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        cityData[i] = {value:data.info[i].city};
                    }
                    svar.setState({cityData:cityData});
                }else{
                    var countyData = [];
                    for(var i = 0 ;i < data.info.length;i++ ){
                        countyData[i] = {value:data.info[i].town};
                    }
                    svar.setState({countyData:countyData});
                }
            }
        });
    },
    //查询省份
    queryProvince:function () {
        if($("#province").find(".body-address-content-selectData").css('display')=='none'&&this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','block');
            $("#city").find(".body-address-content-selectData").css('display','none');
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }else if(this.state.provinceData.length>0){
            $("#province").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(1,"","");
        $("#province").find(".body-address-content-selectData").css('display','block');
    },
    queryCity:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#city").find(".body-address-content-selectData").css('display')=='block'){
            $("#city").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(2,$(".span-provinceid").html(),"");
        $("#city").find(".body-address-content-selectData").css('display','block');
        $("#county").find(".body-address-content-selectData").css('display','none');
    },
    queryCounty:function () {
        if($("#provinceid").next().html()=='选择省份'||$("#cityid").next().html()=='选择地区'||$("#city").find(".body-address-content-selectData").css('display')=='block'
            ||$("#province").find(".body-address-content-selectData").css('display')=='block'){
            return false;
        }
        if($("#county").find(".body-address-content-selectData").css('display')=='block'){
            $("#county").find(".body-address-content-selectData").css('display','none');
            return false;
        }
        this.queryAddress(3,"",$(".span-cityid").html());
        $("#county").find(".body-address-content-selectData").css('display','block');
    },
    render:function () {
        return(
            <div className="body-content">
                <span className="body-content-title" >选择地区：</span>
                <div className="body-address-contents">

                    <div className="body-address-content" id="province">
                        <input type="hidden" id="provinceid"/>
                        <span className="body-address-content-default text-sub span-provinceid" title="" onClick={this.queryProvince}>选择省份</span>
                        <AddressData type="1" resultData={this.state.provinceData}/>
                    </div>
                    <div  id="city" className="body-address-content">
                        <input type="hidden" id="cityid"/>
                        <span className="body-address-content-default text-sub span-cityid" title="" onClick={this.queryCity}>选择地区</span>
                        <AddressData type="2"  resultData={this.state.cityData}/>
                    </div>
                    <div id="county" className="body-address-content">
                        <input type="hidden" id="countyid" value="" data-dataType="Number" data-require="true" data-msg="地区不能为空"/>
                        <span className="body-address-content-default text-sub span-countyid" title="" onClick={this.queryCounty}>选择县或街道</span>
                        <AddressData type="3"  resultData={this.state.countyData}/>
                    </div>
                    <div className="adress-button">
                        <div className="header-right-botton" onClick={this.props.addAdress.bind(this)}>点击新增</div>
                    </div>
                </div>
            </div>
        );
    }
});
/**
 * 省市区组装下拉列表
 * @type {*}
 */
var AddressData = React.createClass({
    componentDidMount:function () {
        $('.body-address-content').hover(function () {
        },function () {
            $('.body-address-content-selectData').css('display','none');
        });
    },
    handleClick:function (e) {
        if($(e.target).attr("data-type")=="1"){
            $("#city").find(".body-address-content-default").html('选择地区');
            $("#county").find(".body-address-content-default").html('选择县或街道');
            this.setState({cityData:[],countyData:[]});
        }else if($(e.target).attr("data-type")=="2"){
            this.setState({countyData:[]});
            $("#county").find(".body-address-content-default").html('选择县或街道');
        }
        $(e.target).parent().prev().html(e.target.innerHTML);
        $($(e.target).parent().prev()).attr("title",e.target.innerHTML);
        $(e.target).parent().prev().prev().val(e.target.innerHTML);
        $($(e.target).parent()).hide();
    },
    render:function () {
        var svar = this;
        var resultDATA=this.props.resultData.map(function (value,index) {
            return(
                <span onClick={svar.handleClick} data-type={svar.props.type} >{value.value}</span>
            );
        });
        return(
            <div className="body-address-content-selectData">
                {resultDATA}
            </div>
        );
    }
});

ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);